<!--
@funciton: 系统主框架
-->
<template>
<div class="components-home">
  <el-container class="home-container">
    <!-- 标题 -->
    <el-header class="home-header">
      <span class="title">效益分析</span>
      <div style="display: flex;align-items: center;margin-right: 7px">
        <!-- 下拉个人菜单 -->
        <el-dropdown class="userinfo-container" @command="handleUserCommand">
          <span class="el-dropdown-link userinfo" style="display: flex;align-items: center">
            {{user.name}}&nbsp;
            <i><img v-if="user.userface&&(user.userface!='')" :src="user.userface"
                    style="background-color:#fff;width: 40px;height: 40px;margin-right: 5px;margin-left: 5px;border-radius: 40px"/>
               <img v-else src="../assets/logo.png"
                     style="background-color:#fff;width: 40px;height: 40px;margin-right: 5px;margin-left: 5px;border-radius: 40px"/>
            </i>
          </span>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item command="usercenter">个人信息</el-dropdown-item>
            <el-dropdown-item command="changepassword">密码修改</el-dropdown-item>
            <el-dropdown-item command="switchrole">角色切换</el-dropdown-item>
            <el-dropdown-item command="logout" divided>注销</el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
        <change-pwd :visible="changePwdVisible" :url="'/jcYhxxb/modifyPwd'" :yhm="this.$store.state.user.username"
        @close="changePwdVisible=false"></change-pwd>
      </div>
    </el-header>
      <el-container class="home-main">
        <!-- 侧边栏 -->
        <el-aside width="250px" class="home-aside">
          <div style="display: flex;justify-content: flex-start;width: 250px;text-align: left;">
            <el-menu class="menu" unique-opened router>
              <el-menu-item :index="this.routes[0].children[0].path" key="/BasicInformation/Materials">
                <i class="el-icon-menu" style="color: #20a0ff;"></i>
                <span slot="title">主页</span>
              </el-menu-item>
              <template v-for="(level1,index) in this.routes">
                <!-- 菜单 -->
                <el-submenu v-if="level1.children && level1.meta.showOnMenu" :key="index" :index="index+''">
                  <template slot="title">
                    <i :class="level1.iconCls" style="color: #20a0ff;"></i>
                    <span slot="title">{{level1.name}}</span>
                  </template>
                  <!-- 菜单项 -->
                  <template v-for="level2 in level1.children">
                    <el-menu-item v-if="level2.meta.showOnMenu" :index="level2.path" :key="level2.path">
                      <i :class="level2.iconCls" style="color: #20a0ff;"></i>
                      <span slot="title">{{level2.name}}</span>
                    </el-menu-item>
                  </template>
                </el-submenu>
                <el-menu-item v-else :index="level1.path" :key="level1.path">
                  <i class="el-icon-menu" style="color: #20a0ff;"></i>
                  <span slot="title">{{level1.name}}</span>
                </el-menu-item>
              </template>
            </el-menu>
          </div>
        </el-aside>
        <!-- 主体 -->
        <el-container>
          <el-header height="40px">
            <el-breadcrumb separator-class="el-icon-arrow-right" class="breadcrumb">
              <el-breadcrumb-item :to="{ path: '/BasicInformation/Materials' }">首页</el-breadcrumb-item>
              <el-breadcrumb-item v-text="this.$router.currentRoute.name"></el-breadcrumb-item>
            </el-breadcrumb>
          </el-header>
          <el-main class="home-content">
            <!-- 这里是控制home内各个模块的显示 -->
            <keep-alive>
              <router-view v-if="this.$route.meta.keepAlive"></router-view>
            </keep-alive>
            <router-view v-if="!this.$route.meta.keepAlive"></router-view>
          </el-main>
          <el-footer height="30" class="home-footer">
            <copy-right :copyrightType="copyRightType" :authorOrOwner="copyRightAuthor" :copyrightDates="copyRightYear"></copy-right>
          </el-footer>
        </el-container>
      </el-container>
  </el-container>
</div>
</template>
<script>
import Config from '@/config'
import Copyright from "@/components/basic/Copyright"
import ChangePasswordDlg from "@/components/basic/ChangePasswordDlg"

export default {
  components: {
    "copy-right": Copyright,
    "change-pwd":ChangePasswordDlg,
  },
  computed: {
    user() {
      return this.$store.state.user;
    },
    routes() {
      return this.$store.state.routes
    }
  },
  methods: { 
    handleUserCommand(cmd) {// 用户菜单点击响应
      let me = this;
      if (cmd == "logout") {
        me.$confirm('注销登录, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          me.getRequest("/static/data/testSuc.json").then((resp) => {
            me.$message.success("已退出");
          });
          me.$store.commit("logout");
          me.$router.replace({
            path: "/"
          });
        }).catch(() => {
          me.$message.info('取消');
        });
      }else if(cmd=="usercenter"){
        if(me.$store.state.user.sslx == '教师'){
          me.getRequest("/jcJsxxb", {
            jsbh:me.$store.state.user.sslxbh
          }).then(resp => {
            if(resp.status == 200) {
              if(resp.data.results.length == 1){
                me.teacherRecord = resp.data.results[0];
                me.teacherDlgVisible = true;
                console.log("");
              }else{
                me.$message.error("未查询到个人信息，请联系管理员解决！");
              }
            }
          });
        }else if(me.$store.state.user.sslx== '学生'){
          // TODO 
        }
      }else if(cmd=="changepassword"){
        me.changePwdVisible = true;
      }else if(cmd=="switchrole"){
        me.$confirm('是否切换角色?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          me.$store.commit("switchrole");
          me.$router.replace({
            path:"/Role" 
          });
        }).catch(() => {});
      }
    },
    handleAvatarSuccess:function(res, file) {//上传照片成功之后
      var me = this;
			me.teacherRecord['zplj'] = res.path;//生成一个服务器路径，保存起来
      me.imageUrl = URL.createObjectURL(file.raw);// 显示照片
    },
    onTeacherConfirm: function() {// 对话框-确认
      let me = this;
      // 发送请求 /static/data/testSuc.json
      me.postRequest("/jcJsxxb",me.teacherRecord).then(resp => {
        if (resp.status == 200) {
          me.$message.success("修改信息成功！");
          //最后，隐藏对话框
          me.teacherDlgVisible= false;
        } else {
          me.$message.error("服务器发生错误，代码：" + resp.status);
        }
      });
    },
  },
  data() {  
    return {
      homeTitle: Config.appName,
      copyRightType:"chinese-long",
      copyRightAuthor:Config.copyRight,
      copyRightYear:new Date().getFullYear().toString(),
      changePwdVisible:false,
      teacherDlgVisible:false,
      teacherRecord:{},
      teacherRules:{},
      studnetRecord:{},
      studentRules:{}
    }
  },
  mounted: function() {

  },
}
</script>
<style lang="scss">
@import "@/assets/scss/basic.scss";

$-menu-Width:250;

.components-home {
    .home-container {
        height: 100%;
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;

        .home-header {
            background-color: $--color-primary;
            color: #333;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: space-between;
            box-sizing: content-box;
            padding: 0;

            .title {
                color: #fff;
                font-size: 22px;
                display: inline;
                margin-left: 20px;
            }

            .userinfo-container {
                display: inline;
                margin-right: 20px;

                .userinfo {
                    color: #fff;
                    cursor: pointer;
                }
            }
        }

        .home-main {
            height: 100%;
            padding: 0;

            .home-aside {
                background-color: $--border-level-1;

                .menu {
                    background: $--border-level-1;
                    width: $-menu-Width + px;
                }

                .el-submenu .el-menu-item {
                    width: ($-menu-Width - 2) + px;//这个地方要比菜单小一小点，不然会出现滚动条
                    min-width: 175px;
                }

                .el-menu-icon,
                .el-submenu-icon {
                    color: #20a0ff;
                    width: 14px;
                }
            }

            .breadcrumb {
                font-size: 16px;
                margin: 15px 5px;
            }

            .home-content {
                height:100%;
                background-color: #fff;
                margin: 0;
                padding: 0;
            }

            .home-footer {
                padding: 0;
            }
        }

    }
}
</style>
